<template>
    <el-tabs v-model="activeIndex" class="widget-tabs">
        <!-- <el-tab-pane label="通用组件" name="base"> -->
            <el-scrollbar>
                <el-collapse model-value="1" accordion class="base-collapse">
                    <template v-for="(item, index) in baseWidgets">
                        <el-collapse-item :title="item.label" :name="`${index + 1}`">
                            <widget-templates
                                :types="item.list"
                                @click="onClickWidgetTemplate"
                            />
                        </el-collapse-item>
                    </template>
                </el-collapse>
            </el-scrollbar>
        <!-- </el-tab-pane> -->
    </el-tabs>
</template>

<script>
import { defineComponent, ref, computed } from 'vue'
import { useEditStore } from '@/store'
import { ElMessage } from 'element-plus'
import WidgetTemplates from '@/components/edit/widget-templates'
import useWidget from '@/libs/edit/widgetData'
import usePageHistory from '@/libs/edit/pageHistory'
import usePhoneView from '@/libs/edit/phoneView'
import testWidgetTypeAdd from '@/libs/edit/testWidgetTypeAdd'
export default defineComponent({
    name: 'EditLeftWidget',
    components: {
        WidgetTemplates
    },
    setup() {
        const activeIndex = ref('base')

        const baseWidgets = [{
            label: '基础组件',
            list: ['text', 'picture', 'button', 'title-ele', 'carousel', 'announce', 'video', 'nav-icon']
        }, {
            label: '布局组件',
            list: ['breakline', 'layout-vessel', 'static-vessel', 'free-vessel', 'suspension', 'sidebar', 'popup-window']
        }, {
            label: '辅助组件',
            list: ['search', 'sort', 'official-account', 'advertising', 'map']
        }]

        const editStore = useEditStore()

        const {
            widgetList,
            onSelectWidget
        } = useWidget()

        const {
            onAddPageHistory
        } = usePageHistory()

        const {
            setScrollTopId
        } = usePhoneView()

        const pageType = computed(() => editStore.pageType)

        const onClickWidgetTemplate = data => {
            // 校验控件添加
            const testData = testWidgetTypeAdd({
                widgetList: widgetList.value,
                widgetTypes: [data.eles.type],
                pageType: pageType.value
            })
            if (!testData.status) {
                ElMessage({
                    message: testData.text,
                    type: 'warning',
                    grouping: true
                })
                return
            }

            widgetList.value.push(data)
            onSelectWidget([data.eles.id])
            onAddPageHistory()
            setTimeout(() => setScrollTopId(data.eles.id), 100)
        }

        return {
            activeIndex,
            baseWidgets,
            onClickWidgetTemplate
        }
    }
})
</script>

<style lang="less" scoped>
.widget-tabs {
    height: 100%;
    background-color: var(--edit-custome-background-color-2);
    & > ::v-deep(.el-tabs__header) {
        background-color: var(--edit-bg-color);
        margin-bottom: 0;
        .el-tabs__item {
            height: 58px;
            line-height: 58px;
            padding: 0 20px;
        }
        .el-tabs__active-bar {
            &::after {
                content: '';
                position: absolute;
                display: inline-block;
                left: 50%;
                bottom: 2px;
                border-right: 4px solid transparent;
                border-left: 4px solid transparent;
                border-bottom: 4px solid var(--edit-color-primary);
                margin-left: -4px;
            }
        }
    }
    & > ::v-deep(.el-tabs__content) {
        height: calc(100% - 58px);
        .el-tab-pane {
            height: 100%;
        }
    }
}
.base-collapse {
    & > ::v-deep(.el-collapse-item) {
        .el-collapse-item__header {
            font-size: 14px;
            padding-left: 33px;
            position: relative;
            & > i {
                position: absolute;
                left: 14px;
            }
        }
        .el-collapse-item__content {
            padding-bottom: 0;
        }
    }
}
</style>